<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('position.ddmx')" :leftIcon="true"></navbar>

		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<text>加载中...</text>
		</view>

		<!-- 订单详情卡片 -->
		<view v-else class="order-card">
			<!-- 订单号和复制按钮 -->
			<view class="order-number">
				<text>{{ t('position.ddh') }}：{{ orderDetail.orderNumber }}</text>
				<image src="/static/icon/copy-icon.svg" mode="aspectFit" @click="copyOrderNumber"></image>
			</view>

			<!-- 交易对和方向 -->
			<view class="symbol-info">
				<view class="symbol-direction">
					<text class="symbol">{{ orderDetail.symbol }}</text>
					<view class="direction-tag" :class="orderDetail.direction === 'up' ? 'up' : 'down'">
						<image :src="orderDetail.direction === 'up' ? '/static/icon/up-icon2.svg' : '/static/icon/down-icon2.svg'"
							mode="aspectFit"></image>
					</view>
					<text class="time">{{ orderDetail.duration }}</text>
					<view class="order-status" :class="'status-' + orderDetail.status">{{ orderDetail.statusText }}</view>
				</view>
			</view>

			<!-- 订单详情信息 -->
			<view class="order-details">
				<view class="detail-row">
					<text class="label">{{ t('position.kyjg') }}：</text>
					<text class="value">{{ orderDetail.openPrice }}</text>
				</view>
				<view class="detail-row">
					<text class="label">{{ t('position.xdsl') }}：</text>
					<text class="value">{{ orderDetail.amount }}</text>
				</view>
				<view class="detail-row">
					<text class="label">{{ t('position.syl') }}：</text>
					<text class="value"
						:class="orderDetail.profitRate.startsWith('+') ? 'profit' :orderDetail.profitRate.startsWith('0')?'ping':'loss'">{{ orderDetail.profitRate }}</text>
				</view>
				<view class="detail-row">
					<text class="label">{{ t('position.fdsy') }}：</text>
					<text class="value"
						:class="orderDetail.floatingProfit.startsWith('+') ? 'profit' :orderDetail.floatingProfit.startsWith('0')?'ping':'loss'">{{ orderDetail.floatingProfit }}</text>
				</view>
				<view class="detail-row">
					<text class="label">{{ t('position.sxf') }}：</text>
					<text class="value">{{ orderDetail.fee }}</text>
				</view>
				<view class="detail-row">
					<text class="label">{{ t('position.cjsj') }}：</text>
					<text class="value-time">{{ orderDetail.createTime }}</text>
				</view>
				<view class="detail-row">
					<text class="label">{{ t('position.jssj') }}：</text>
					<text class="value-time">{{ orderDetail.endTime }}</text>
				</view>
			</view>
		</view>

		<!-- 继续下单按钮 -->
		<view class="continue-btn" @click="continueOrder">
			{{ t('position.jxxd') }}
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import { optionApi } from '@/utils/api';
	
	const {
		t,
		locale
	} = useI18n();

	// 加载状态
	const loading = ref(false);
	
	// 订单ID（从路由参数获取）
	const orderId = ref('');
	
	// 订单详情数据
	const orderDetail = ref({
		orderNumber: '',
		symbol: '',
		direction: 'up',
		duration: '',
		openPrice: '0',
		amount: '0',
		profitRate: '0%',
		floatingProfit: '0',
		fee: '0',
		createTime: '',
		endTime: '',
		status: 0,
		statusText: '待结算',
		currentPrice: '0'
	});

	// 获取订单详情
	const getOrderDetail = async () => {
		if (!orderId.value) {
			uni.showToast({
				title: '订单ID不能为空',
				icon: 'none'
			});
			return;
		}

		loading.value = true;
		try {
			const response = await optionApi.getOrderDetail(orderId.value);
			
			if (response.code === 0 && response.data) {
				// 更新订单详情数据
				const data = response.data;
				
				// 格式化数字显示
				const formatNumber = (value, defaultValue = '0') => {
					if (!value && value !== 0) return defaultValue;
					return typeof value === 'number' ? value.toString() : value.toString();
				};
				
				// 格式化百分比
				const formatPercent = (value) => {
					if (!value && value !== 0) return '0%';
					const num = parseFloat(value);
					return (num >= 0 ? '+' : '') + num + '%';
				};
				
				// 格式化盈亏
				const formatProfit = (value) => {
					if (!value && value !== 0) return '0';
					const num = parseFloat(value);
					return (num >= 0 ? '+' : '') + num;
				};
				
				// 格式化时间
				const formatTime = (timestamp) => {
					if (!timestamp) return '';
					const date = new Date(timestamp);
					return date.toLocaleString('zh-CN', {
						year: 'numeric',
						month: '2-digit',
						day: '2-digit',
						hour: '2-digit',
						minute: '2-digit',
						second: '2-digit'
					}).replace(/\//g, '.').replace(',', '');
				};
				
				// 获取方向文本
				const getDirectionText = (direction) => {
					return direction === 1 ? 'up' : 'down';
				};
				
				// 获取订单状态文本
				const getStatusText = (status) => {
					const statusMap = {
						0: '待结算',
						1: '盈利',
						2: '亏损',
						3: '平局'
					};
					return statusMap[status] || '未知';
				};
				
				orderDetail.value = {
					orderNumber: data.orderSn || data.id || '',
					symbol: data.productName || 'BTC/USDT',
					direction: getDirectionText(data.direction),
					duration: data.second ? `${data.second}s` : '60s',
					openPrice: formatNumber(data.buyPrice),
					amount: formatNumber(data.amount),
					profitRate: formatPercent(data.profitRatio),
					floatingProfit: formatProfit(data.profit),
					fee: formatNumber(data.fee),
					createTime: formatTime(data.createTime),
					endTime: formatTime(data.closeTime),
					status: data.status,
					statusText: getStatusText(data.status),
					currentPrice: formatNumber(data.currentPrice),
					productId: data.productId // 添加产品ID字段
				};
			} else {
				uni.showToast({
					title: response.msg || '获取订单详情失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取订单详情失败:', error);
			uni.showToast({
				title: '网络错误，请稍后重试',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};

	// 复制订单号
	const copyOrderNumber = () => {
		uni.setClipboardData({
			data: orderDetail.value.orderNumber,
			success: () => {
				uni.showToast({
					title: t('common.fzcg'),
					icon: 'none'
				});
			}
		});
	};

	// 继续下单
	const continueOrder = () => {
		// 检查是否有产品ID
		if (orderDetail.value.productId) {
			// 跳转到量化产品详情页面，传递产品ID
			uni.navigateTo({
				url: `/pages/quantify/details?id=${orderDetail.value.productId}`
			});
		} else {
			// 如果没有产品ID，显示提示信息
			uni.showToast({
				title: '产品信息不完整，无法继续下单',
				icon: 'none'
			});
		}
	};

	// 页面加载时获取订单详情
	onMounted(() => {
		// 获取路由参数中的订单ID
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const options = currentPage.options;
		
		if (options && options.id) {
			orderId.value = options.id;
			getOrderDetail();
		} else {
			uni.showToast({
				title: '缺少订单ID参数',
				icon: 'none'
			});
		}
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding: 69.77rpx 34.89rpx;
		box-sizing: border-box;
	}

	// 加载状态
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		
		text {
			font-size: 28rpx;
			color: #666;
		}
	}

	// 订单详情卡片
	.order-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		// padding: 69.77rpx 158.73rpx;
		padding: 69.77rpx 0;
		// padding-left: 158.73rpx;
		text-align: center;

		// 订单号和复制按钮
		.order-number {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;

			text {
				font-size: 24.42rpx;
				font-weight: 300;
				letter-spacing: 0rpx;
				line-height: 35.36rpx;
				color: rgba(0, 0, 0, 1);
				margin-right: 20.36rpx;
			}

			image {
				width: 22.09rpx;
				height: 22.09rpx;
			}
		}

		// 交易对和方向
		.symbol-info {
			margin-bottom: 68.02rpx;

			.symbol-direction {
				display: flex;
				align-items: center;
				justify-content: center;

				.symbol {
					font-size: 27.91rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 40.42rpx;
					color: rgba(51, 51, 51, 1);
					margin-right: 17.44rpx;
				}

				.direction-tag {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20.93rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.time {
					font-size: 24.42rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 35.36rpx;
					color: rgba(0, 0, 0, 1);
				}

				.order-status {
					font-size: 24.42rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 35.36rpx;
					color: rgba(0, 0, 0, 1);
					margin-left: 4rpx;
					
					&.status-0 {
						color: rgba(255, 165, 0, 1); // 待结算-橙色
					}
					
					&.status-1 {
						color: rgba(13, 179, 100, 1); // 盈利-绿色
					}
					
					&.status-2 {
						color: rgba(247, 56, 79, 1); // 亏损-红色
					}
					
					&.status-3 {
						color: rgba(42, 130, 228, 1); // 平局-蓝色
					}
				}
			}
		}

		// 订单详情信息
		.order-details {
			// width: 390.72rpx;
			padding-left: 158.73rpx;

			.detail-row {
				display: flex;
				// align-content: center;
				// justify-content: center;
				margin-bottom: 20rpx;

				.label {
					// width: 200rpx;
					font-size: 27.91rpx;
					font-weight: 300;
					color: rgba(0, 0, 0, 1);
					text-align: left;
				}

				.value {
					font-size: 24.42rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 35.36rpx;
					color: rgba(51, 51, 51, 1);

					&.profit {
						color: rgba(13, 179, 100, 1);
					}

					&.loss {
						color: rgba(247, 56, 79, 1);
					}

					&.ping {
						color: rgba(42, 130, 228, 1);
					}
				}

				.value-time {
					font-size: 27.91rpx;
					font-weight: 300;
					letter-spacing: 0rpx;
					line-height: 40.42rpx;
					color: rgba(0, 0, 0, 1);
				}
			}
		}
	}

	// 继续下单按钮
	.continue-btn {
		// width: 570.38rpx;
		height: 97.68rpx;
		opacity: 1;
		border-radius: 26.16rpx;
		background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
		font-size: 31.4rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		line-height: 97.68rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin: 457rpx 90.7rpx 0 90.7rpx;
	}
</style>